<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>textPath</title>
  </head>
  <body>
    <!-- 
    1. textPath 元素用于沿路径形状呈现文本
    2. textPath 有 6 个基本属性：
      - href: 引用路径的 URL
      - lengthAdjust: 如何压缩或拉伸文本以适应路径的长度, 可选值（spacing|spacingAndGlyphs），默认值 spacing
      - method: 如何沿路径渲染字形。可选值（align|stretch），默认为 align
      - spacing: 字形之间的间距。可选值（auto|exact）,默认值 exact
      - startOffset: 文本开头应与路径开头偏移多远。可以是长度、百分比或数字
      - textLength: 沿路径的文本宽度。可以是长度、百分比或数字。默认为自动
    -->
    <svg
      width="350"
      height="200"
      viewBox="0 0 350 200"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <path
        id="lineAB"
        d="M30,180 q150,-250 300,0"
        fill="none"
        stroke="blue"
        stroke-width="2"
      />
      <text style="fill: red; font-size: 25px">
        <textPath
          xlink:href="#lineAB"
          lengthAdjust="spacingAndGlyphs"
          textLength="100%"
          startOffset="20"
        >
          what's the svg-textPath
        </textPath>
      </text>
    </svg>
  </body>
</html>
